<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--bootstrap引用-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    .dropdown {
        z-index: 2;
        display: inline;
    }

    input {
        z-index: 100
    }

    .login-item {
        width: 320px;
        height: 40px;
        margin-top: 12px;
        float: left;
        position: relative;
    }

    .inner-login-item-right {
        width: 320px;
        height: 40px;
        float: left;
    }

    .main {

        height: 376px;
        width: 320px;
        margin: 0 auto;
        margin-top: 200px;
        /* background-color: red; */
    }

    .bg {
        float: left;
        height: 850px;
        width: 100%;
        background-image: url("./img/background.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }

    #login {
        background-color: #1961c4;
        color: white;
    }

    .user-icon {
        position: absolute;
        left: 0;
        z-index: 1000;
        background-image: url("img/xingming.png");
        background-repeat: no-repeat;
        /*设置图片不重复*/

        background-position: 0px 0px;
        /*图片显示的位置*/

        width: 20px;
        /*设置图片显示的宽*/

        height: 20px;
        /*图片显示的高*/
        
    }
</style>
<script>

    $(function () {
        $('#change-admin').click(function () {
            // alert("test");
            $('#display-role').text("我是管理员");
        });
        $('#change-user').click(function () {
            $('#display-role').text("我是用户");

        });

        $("#login").click(function () {
            alert("TET");
            var name = $("#name").val();
            var password = $("#password").val();
            $.ajax({
                type: "post",
                data: { "username": name, "password": password },
                url: "login",
                success: function (result) {
                    alert(result)
                    if (result == "admin") {
                        window.location.href = "http://localhost:8080/adminPage.html";
                    }
                    if (result == "user") {
                        sessionStorage.setItem("username",name);
                        //获取用 sessionStorage.getItem("username")
                        window.location.href = "http://localhost:8080/userPage.html";
                    }
                    else{
                        window.location.href = "http://localhost:8080/errorPage.html";
                    }
                }
            });
        });

    });
</script>

<body>
    <div class="bg">
        <div class="main">
            <div class="bran-icon"><img src="./img/login-icon.png"></div>
            <div class="login-item">
                <i class="input-icon user-icon"></i>
                <input class="inner-login-item-right" id="name" type="text" name="name" placeholder="用户名"></div>
            <div class="login-item">
                <i class="input-icon password-icon"></i><input class="inner-login-item-right" id="password"
                    type="password" name="password" placeholder="密码"></div>
            <div class="dropdown">
                <div type="button" style="padding:0px;margin-top:10px;" class="btn dropdown-toggle" id="dropdownMenu1"
                    data-toggle="dropdown">
                    <span id="display-role" style="color:white"> 我是管理员</span>

                    <span class="caret"></span>
                </div>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                    <li role="presentation">
                        <div id="change-admin"> <a role="menuitem" tabindex="-1" href="#">我是管理员</a></div>
                    </li>
                    <li role="presentation">
                        <div id="change-user"><a role="menuitem" tabindex="-1" href="#">我是用户</a></div>
                    </li>

                </ul>
            </div>
            <button class="login-item btn" id="login" onclick="" name="login">登陆</button>
        </div>
    </div>

</body>

</html>